<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <order-search @search="reload" />
    <el-card shadow="never">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        row-key="productItemId"
        :columns="columns"
        :datasource="datasource"
        :default-expand-all="false"
        :need-page="true"
        @done="onDone"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            icon="el-icon-upload2"
            class="ele-btn-icon"
            @click="reportexcel"
            >导出</el-button
          >
        </template>

        <!-- 标题列 -->
        <template slot="title" slot-scope="{ row }">
          <i :class="row.icon"></i> {{ row.title }}
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="showInfo(row, '0')"
            >详情</el-link
          >
          <el-link
            type="primary"
            v-if="row.status == 5"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row, '3')"
            >配送</el-link
          >
          <el-popconfirm
            class="ele-action"
            v-if="row.status == 7"
            title="是否可以确认收货？"
            @confirm="confirm(row)"
          >
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              >确认收货</el-link
            >
          </el-popconfirm>

          <el-popconfirm
            class="ele-action"
            v-if="row.status == 1"
            title="确定要取消订单吗？"
            @confirm="cancel(row)"
          >
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              >取消订单</el-link
            >
          </el-popconfirm>
          <el-popconfirm
            class="ele-action"
            v-if="row.status == 100"
            title="确定要删除吗？"
            @confirm="remove(row)"
          >
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              >删除</el-link
            >
          </el-popconfirm>
          <el-button v-if="row.status != 100" type="text" @click="onOutbound(row.id)" size="small"
            >打印原料码</el-button
          >
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <order-detail
      :data="current"
      :visible.sync="showDetail"
      @done="reload"
      :btnindex="btnindex"
    />
    <order-delivery
      :data="current"
      :visible.sync="showDeliveryEdit"
      @done="reload"
      :btnindex="btnindex"
    />

    <el-dialog
      :close-on-click-modal="false"
      title="打印"
      width="83%"
      :visible.sync="dialogFormVisible01"
    >
      <div class="dialog-content">
        <div v-for="(item, index) in outboundList" :key="index" class="item">
          <img :src="item.qrImg" alt="" srcset="" />
          <p style="margin-top: 10px">{{ item.productItemName }} <em style="color: blue;cursor: pointer;" @click="handlePrint(item.id)">打 印</em></p>
        </div>
      </div>

      <div
        style="display: flex; align-items: center; justify-content: flex-end"
      >
       <!--<el-button
          type="primary"
          @click="handlePrint"
          style="margin-right: 15px"
          >打 印</el-button
        >--> 
        <el-button
          @click="dialogFormVisible01 = false"
          style="margin-right: 15px"
          >关 闭</el-button
        >
        <!-- <el-pagination
          style="display: flex; justify-content: flex-end"
          background
          @current-change="handleOutboundCurrentChange"
          layout="total, prev, pager, next"
          :current-page.sync="outboundCurrentPage"
          :total="outboundTotalNum"
          :page-size="10"
        >
        </el-pagination> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { printHtml } from 'ele-admin';
  import OrderSearch from './components/order-search';
  import OrderDetail from './components/order-detail';
  import OrderDelivery from './components/order-delivery';
  import {
    QueryOrderViewByParams,
    CancelOrder,
    ConfirmReceipt,
    QueryOrderOutStockViewById,
    PrintSaleOrderById
  } from '@/api/ordermanager/orderlist';
  export default {
    name: 'orderManager',
    components: {
      'order-search': OrderSearch,
      'order-detail': OrderDetail,
      'order-delivery': OrderDelivery
    },
    data() {
      return {
        dialogFormVisible01: false,
        outboundList: [],
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left',
            label: '序号'
          },
          {
            prop: 'orderTime',
            label: '下单时间',
            showOverflowTooltip: true,
            align: 'center',
            sortable: 'orderTime',
            formatter: (row, column, cellValue) => {
              return this.$util.toDateString(cellValue, 'YYYY-MM-DD HH:mm');
            }
          },
          {
            prop: 'orderNo',
            label: '订单编号',
            sortable: 'orderNo',
            showOverflowTooltip: true
          },
          {
            prop: 'productQty',
            label: '产品数量',
            showOverflowTooltip: true,
            width: 100,
            align: 'right'
          },
          {
            prop: 'totalPrice',
            label: '订单金额',
            showOverflowTooltip: true,
            width: 100,
            align: 'right'
          },

          { prop: 'customerName', label: '下单人', showOverflowTooltip: true },
          {
            prop: 'customerPhone',
            label: '下单人电话',
            showOverflowTooltip: true
          },

          {
            prop: 'statusDesc',
            label: '状态',
            showOverflowTooltip: true,
            width: 80,
            align: 'center',
            sortable: 'statusDesc'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 250,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true
          }
        ],
        // 当前编辑数据
        current: null,
        //操作按钮索引
        btnindex: '1',
        // 是否显示产品规格编辑弹窗
        showDeliveryEdit: false,
        showDetail: false,
        orderid:null,
        // 导出列
        exportList: [
          { name: '订单编号', keys: 'orderNo', status: true },
          { name: '订单金额', keys: 'totalPrice', status: true },
          { name: '产品数量', keys: 'productQty', status: true },

          { name: '下单人', keys: 'customerName', status: true },
          { name: '下单人电话', keys: 'customerPhone', status: true },
          { name: '下单时间', keys: 'orderTime', status: true },
          { name: '状态', keys: 'statusDesc', status: true }
        ]
      };
    },
    methods: {
      /* 表格数据源 */
      async datasource(params) {
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if (params.order.order == null || params.order.order == undefined) {
          params.where.orderBys = [{ sort: 'orderTime', order: 1 }];
        } else {
          params.where.orderBys = [];
          params.where.orderBys.push({
            sort: params.order.sort,
            order: params.order.order == 'asc' ? 0 : 1
          });
        }

        let data = await QueryOrderViewByParams(params.where);

        return {
          list: data.items,
          count: data.totalrecords
        };
      },

      getOutbound(productId) {
        QueryOrderOutStockViewById(productId)
          .then((res) => {
            console.log(res);
            this.outboundList = res;
            console.log(this.outboundList);
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      handlePrint(id) {
        console.log("ss:"+this.outboundList.length);
         
          PrintSaleOrderById(id).then((data)=>{
              const pWindow = printHtml({
                  html: data, // 要打印的内容
                  // style: '<style>span { color: red; }</style>',  // 页面样式
                  // title: '', // 页面标题，浏览器打印设置显示页眉会显示页面标题
                  horizontal: true, // 是否横向打印
                  blank: true, // 是否打开新页面打印
                  close: true, // 如果是打开新页面，打印完是否关闭
                  print: true, // 如果是打开新窗口是否自动打印
                  iePreview: true, // 是否兼容 ie 打印预览
                  loading: true, // 是否显示 loading
                  before: () => { // 打印开始的回调
                  },
                  done: () => { // 打印完成的回调
                  },
                  margin: 0, // 页间距
                  header: '', // 页眉 html
                  footer: '' // 页脚 html
              });
            });
        
     
    },

      onOutbound(productId) {
        this.dialogFormVisible01 = true;
        this.outboundList = [];
        this.orderid=productId;
        this.getOutbound(productId);
      
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {
        // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
        if (this.current) {
          Object.assign(this.current, data);
        }
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where: where });
      },
      /**
       * 显示编辑
       * @param row 当前行对像
       */
      openEdit(row, index) {
        this.current = null;
        this.current = row;
        this.btnindex = index;
        this.showDeliveryEdit = index == '3';
      },
      showInfo(row, index) {
        this.current = null;
        this.current = row;
        this.btnindex = index;
        this.showDetail = index == '0';
      },

      /* 取消订单 */
      cancel(row) {
        const loading = this.$loading({ lock: true });
        CancelOrder(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      confirm(row) {
        const loading = this.$loading({ lock: true });
        ConfirmReceipt(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 删除订单 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        DeleteOrder(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 导出 */
      reportexcel(pams) {
        //初始化参数
        let params = {
          pagesize: 0,
          pageindex: 1,
          conditions: [],
          orderBys: [{ sort: 'orderTime', order: 1 }]
        };
        //加载进度条
        const loading = this.$loading({ lock: true });
        //重新请求查询
        this.$refs.table.doRequest(({ where }) => {
          if (where) {
            params.orderBys = where.orderBys;
            params.pageindex = where.pageindex;
            params.conditions = where.conditions;
          }
          //查询数据
          QueryOrderViewByParams(params)
            .then((data) => {
              loading.close();
              this.$refs.ExportDialog.showEdits = true;
              this.$refs.ExportDialog.checkList = this.exportList;
              this.$refs.ExportDialog.titleName = '订单列表';
              this.$refs.ExportDialog.dataList = data;
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .dialog-content {
    width: 100%;
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;

    .item {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;

      img {
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
      }
    }
  }
</style>
